<template lang="html">
    <div class="showlist">
        <div class="panel hotsongs">
          <ul class="list">
            <li  v-for="(item,index) in showListradioData">
                <div class="poster">
                  <img :src="item.imgUrl">
                </div>
                <div class="info">
                    <div class="name">{{item.title}}</div>
                    <div class="author">热度 {{item.heatrate}} 粉丝度 {{item.followersCount}}</div>
                </div>
                <div  class="guanzhu" @click="isAttention(item)">
                  <!--我只关注第一个span 默认显示“关注”，值为true;点击后，显示已关注，值为false，不显示-->
                  <span v-show="!item.attention">+关注</span>
                  <span v-show="item.attention">已关注</span>
                </div>
            </li>
          </ul>
        </div>
    </div>
</template>

<script>
export default {
  name:"showlistradio",
  data(){
    return{
      showListradioData:[]
    }
  },
  methods:{
    isAttention(item){
      item.attention = !item.attention;
      console.log(item.attention);
    }
  },
  created(){
      const recommendSeeUrl="http://localhost:8080/static/showListRadio.json"
      // const recommendSeeUrl=this.HOST+"/v1/restserver/ting?method=baidu.ting.song.getRecommandSongList&song_id=877578&num=5"
      this.$axios.get(recommendSeeUrl)
      .then(res=>{
          // console.log(res.data);
          this.showListradioData=res.data.showListradioData;
      })
      .catch((error) => {
        console.log(error);
      })
  }
}
</script>

<style scoped>
.showlist{
    background-color: #fff;
    padding: 0.32rem 0.2rem 0;
    box-sizing:border-box;
}

.layout.home .mod-lists .panel {
    position: relative;
    top: -0.01rem;
    display: none;
}

.list {
    word-wrap: break-word;
    -webkit-hyphens: auto;
    hyphens: auto;
    word-break: break-all;
}
.list .guanzhu{
    width: 0.88rem;
    height: 0.38rem;
    border: 1px solid #000;
    text-align: center;
    vertical-align: middle;
    border-radius: 12px;
    margin: 1.09rem 0rem 0 .8rem;
}
.list .guanzhu span{
  display: inline-block;
  margin-top: 0.05rem;
}
.panel .list li {
    height: 1.8rem;
    padding-left: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    margin-bottom: .24rem;
}

.list li.song {
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    min-height: 1.8rem;
    text-align: left;
    margin-top: 0.1rem;
}

.panel .list li .poster {
    position: relative;
    width: 0.45rem;
    margin-right:0.08rem;
}

.panel .list li .poster img {
    border: 1px solid #eee;
    width: 1.8rem;
    height: 1.8rem;
}

.list li .info {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 0.7;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-left: 1.44rem;

}

.panel .list li .info .name {
      overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 16px;
    color: #000;
    margin: .6rem 0 .4rem 0;
}

.panel .list li .info .author {
      overflow: hidden;
    /* text-overflow: ellipsis; */
    /* white-space: nowrap; */
    font-size: 12px;
    color: #000;
    margin-top: 0.02rem;
}
.more-songs{
  color: #999;
  margin-top: 0.09rem;
  font-size: 12px;
  text-align: center;
  height: .32rem;
  line-height: .32rem;
}
</style>
